<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('news.消息管理')" />
    <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    />
    <div class="mt12 toolbar flex_aic_jcsb" v-my-point="'message:add'">
      <div
        class="addBtn flex_aic_jcc"
        @click="(editDiaVisible = true), (editDiaData = {})"
      >
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>{{ $t('news.新增消息') }}</span>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      border
      v-loading="loading"
    >
      <el-table-column :prop="'title' + locale" :label="$t('news.消息标题')" />
      <el-table-column prop="readVipCount" :label="$t('news.阅读用户数量')" />
      <el-table-column prop="createdTime" :label="$t('news.创建时间')">
        <template #default="scope">
          {{ moment(scope.row.createdTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('news.发布状态')">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="(v) => handleStatusChange(v, scope.row)"
            :disabled="scope.row.status === 1"
            v-my-point="'message:publish'"
          />
          <span v-my-point-hide="'message:publish'">
            {{ scope.row.status === 1 ? $t('news.已发布') : $t('news.未发布') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('news.操作')">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button
              type="text"
              size="small"
              @click="handleDetail(scope.row)"
              v-my-point="'message:list'"
              >{{ $t('news.查看') }}</el-button
            >
            <el-button
              v-if="scope.row.status == 0"
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
              v-my-point="'message:edit'"
              >{{ $t('news.编辑') }}</el-button
            >
            <el-popconfirm
              :title="$t('news.确定删除吗')"
              @confirm="handleDelete(scope.row, deleteFunc)"
              :confirm-button-text="$t('news.确定')"
              :cancel-button-text="$t('news.取消')"
                width="260px"
            >
              <template #reference>
                <el-button class="ml0" type="text" size="small" v-my-point="'message:del'">{{ $t('news.删除') }}</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia
      v-model="editDiaVisible"
      :data="editDiaData"
      @success="getDataList"
    ></EditDia>
    <DetailDia
      v-model="DetailDiaVisible"
      :data="DetailDiaData"
    ></DetailDia>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import EditDia from "./editDia.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import moment from "moment";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import { useI18n } from "vue-i18n";
import DetailDia from "./detailDia.vue";

const { locale, t } = useI18n();
const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSearch,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
  handleDelete,
} = useTableMixin(Api.messageList);

const deleteFunc = (ids) => {
  return Api.deleteMessage(ids);
};

const toSearch = (params) => {
  handleSearch({ ["title" + locale.value]: params?.title });
};

const editDiaVisible = ref(false);
const editDiaData = ref({});
const DetailDiaVisible = ref(false);
const DetailDiaData = ref({});

const searchList = computed(() => [
  {
    label: t('news.消息标题'),
    key: "title",
    type: "input",
  },
]);
const handleStatusChange = (v, row) => {
  Api.publishMessage(row.id).then((res) => {
    const { status } = res;
    if (status === 200) {
      ElMessage.success(t('news.发布状态更新成功'));
      getDataList();
    }
  });
};
const handleEdit = (row) => {
  editDiaVisible.value = true;
  editDiaData.value = JSON.parse(JSON.stringify(row));
};

const handleDetail = (row) => {
  DetailDiaVisible.value = true;
  DetailDiaData.value = JSON.parse(JSON.stringify(row));
};
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(255, 126, 40, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
